<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html ;charset=utf-8" />
	<title>jQuery Ajax Upload demo - ajaxUploadPrompt()</title>
	<!-- css -->
	<link rel="stylesheet" type="text/css" href="../js/upload/ajaxUpload3/jquery-ui.css" />
	<!-- JS CDN IMPORT -->
<%--	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>--%>

	<!-- JS Local IMPORT -->
	<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/upload/ajaxUpload3/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../js/upload/ajaxUpload3/jquery.ajaxupload.js"></script>
	<link rel="stylesheet" type="text/css" href="../js/upload/iframe/css/upload.css" />

	<style>
		body {
			color: #666;
			font-size: 20px;
			text-align: center;
		}

		p {
			margin: 0px;
		}

		#wrapper {
			margin: 0 auto;
			padding: 0 30px;
			min-height: 400px;
			width: 500px;
		}

		#promptzone {
			border: 3px dashed #ccc;
			cursor: pointer;
			padding-top: 40px;
			margin: 0 auto;
			height: 100px;
			width: 450px;
		}

			#promptzone span {
			font-size: 10px;
		}
	</style>
	<script>
		jQuery(function ($) {
			// Set fieldname
			$.ajaxUploadSettings.name = 'uploadfiles';
			// Set promptzone
			$('#promptzone').ajaxUploadPrompt({
				url : '/ajax/multiUpload',
				beforeSend : function () {
					$('#promptzone, #result').hide();
				},
				onprogress : function (e) {
					if (e.lengthComputable) {
						var percentComplete = e.loaded / e.total;
						// Show in progressbar
						$( "#progressbar" ).progressbar({
							value: percentComplete*100,
							complete: function () {
								$(this).progressbar( "destroy" );
							}
						});
					}
				},
				error : function () {
					alert(data.message);
				},
				success : function (data) {

					alert(data.data);
					addImage(data);
					//data = $.parseJSON(data);
					/*var html = '';
					if (data.error) {
						html += '<h2>Error</h2>';
						html += '<p>' + data.error + '</p>';
					}
					if (data.success) {
						html += '<h2>Success</h2>';
						for (var i = 0, len = data.success.length; i < len ; i++) {
							html += '<p>' + data.success[i].filename + '</p>';
						}
					}
					if (data.failed) {
						html += '<h2>Failed</h2>';
						html += '<p>Files failed: ' + data.failed + '</p>';
					}
					$( "#progressbar" ).progressbar( "destroy" );
					$('#result').html(html);
					$('#promptzone, #result').show();*/


				}
			});
		});

		//add by tomas
		//添加图片
		function addImage(data) {
			//alert(data);
			var images = []; //已经上传的图片列表
			// 优化retina, 在retina下这个值是2
			var ratio = window.devicePixelRatio || 1,thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio;
			if ( data.code != "200" ) return;
			var text ='<div class="img-wrapper"><div class="img-container" style="width: "+thumbnailWidth; height:"+thumbnailHeight>';
			text += '<img width="113px" height="113px"  src="'+data.data+'">';
			text += '<div class="file-opt-box clearfix"><span class="remove">删除</span></div></div></div>';
			var $image =$(text);
			$("#img_list").append($image);
			//删除图片
			$image.find(".remove").on("click", function() {
				try {
					var src = $(this).parent().prev().attr("src");
					images.remove(src);
					$image.remove();
				} catch (e) {console.log(e);}
			});
			images.push(data.data);
			console.log(images);
		}
		if ( Array.prototype.remove == undefined ) {
			Array.prototype.remove = function(item) {
				for ( var i = 0; i < this.length; i++ ) {
					if ( this[i] == item ) {
						this.splice(i, 1);
						break;
					}
				}
			}
		}
	</script>
</head>
<body>
<div id="wrapper">
	<h1>ajaxUploadPrompt()</h1>
	<div id="promptzone">
		Click here to choose images to upload
		<br />
		<span>Max 20 files, total 8mb and only image files</span>
	</div>

	<div id="progressbar"></div>
	<span id="upload-file-message"></span>
	<div id="img_list"></div>
</div>
</body>
</html>